<template>
  <div class="flow">
    <el-row :gutter="10">
      <el-col :span="18">
        <div class="flex bg-[var(--base-color)] rounded px-4 flow-class">
          <div
            class="step"
            :class="{
              activeClass: active > index + 1,
              'end-step': index == flowData.length - 1,
            }"
            v-for="(item, index) in flowData"
            :key="index"
          >
            <div class="step-end_time time text-xs" v-if="index == flowData.length - 1">
              {{ item.time }}
            </div>
            <div v-else class="time text-xs">{{ item.time }}</div>
            <div
              :class="['step-area', index == flowData.length - 1 ? 'step-hidden' : '']"
            >
              <div class="line"></div>
              <div class="active-line" v-if="active > index + 1"></div>
            </div>
            <div class="step-icon">
              <img
                v-if="active > index + 1"
                class="step-icon_checked"
                src="@/assets/images/step-checked.png"
              />
              <div v-else-if="active > index" class="step-icon_current"></div>
              <svg-icon
                v-else
                class="text-[24px] text-[var(--flow-step-current-bg-color)]"
                icon-class="state_finish"
              ></svg-icon>
            </div>
            <div class="step-end" v-if="index == flowData.length - 1">
              <span :class="active < index + 1 ? 'text-gray-400' : ''">{{
                item.title
              }}</span>
              <span v-if="item.name">/{{ item.name }}</span>
            </div>
            <div v-else class="flex">
              <template v-if="active == index + 1">
                <span class="active-title">{{ item.title }}</span>
              </template>
              <template v-else>
                <span :class="active < index + 1 ? 'text-gray-400' : ''">{{
                  item.activetitle
                }}</span>
                <span v-if="item.name">/{{ item.name }}</span>
              </template>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-[var(--base-color)] rounded px-4">
          <div
            class="flex justify-between items-center py-3 border-dashed border-b-2 border-[var(--base-border-color)]"
          >
            <div class="flex items-center text-sm">
              <svg-icon
                class="mr-1 text-gray-300 text-base"
                :icon-class="sample_detection.time ? 'active_flow' : 'add_jiance'"
              ></svg-icon
              >样品检测
              <div class="unfinished" v-if="!sample_detection.name">未完成</div>
            </div>
            <div class="text-gray-400 text-sm">
              {{ sample_detection.name }}
              <span v-if="sample_detection.time">| {{ sample_detection.time }}</span>
            </div>
          </div>
          <div class="flex justify-between items-center py-3">
            <div class="flex items-center text-sm">
              <svg-icon
                class="mr-1 text-gray-300 text-base"
                :icon-class="image_processing.time ? 'active_flow' : 'add_pic'"
              ></svg-icon
              >图片处理
              <div class="unfinished" v-if="!image_processing.name">未完成</div>
            </div>
            <div class="text-gray-400 text-sm">
              {{ image_processing.name }}
              <span v-if="image_processing.time">| {{ image_processing.time }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
const active = ref(0);
let formData = reactive(inject("form"));
const data = reactive({
  flowData: [
    {
      time: "",
      title: "生成SKU",
      activetitle: "生成SKU",
      name: "",
    },
    {
      time: "",
      title: "待开发审核",
      activetitle: "开发审核",
      name: "",
    },
    {
      time: "",
      title: "待物流审核",
      activetitle: "物流审核",
      name: "",
    },
    {
      time: "",
      title: "完成",
      activetitle: "完成",
      name: "",
    },
  ],
  sample_detection: {
    time: "",
    name: "",
  },
  image_processing: {
    time: "",
    name: "",
  },
});
const { flowData, sample_detection, image_processing } = toRefs(data);

const init = () => {
  const minNameObject =
    formData.value.goods_sku.length &&
    formData.value.goods_sku.reduce((minObj, currentObj) => {
      if (currentObj.dev_status < minObj.dev_status) {
        return currentObj;
      }
      return minObj;
    }, formData.value.goods_sku[0]);

  active.value = minNameObject.dev_status;
  flowData.value[0].time = minNameObject.create_time;
  flowData.value[0].name = minNameObject.create_user_text;
  flowData.value[1].time = minNameObject.dev_add_time;
  flowData.value[1].name = minNameObject.developer_text;
  flowData.value[2].time = minNameObject.dev_review_time;
  flowData.value[2].name = minNameObject.dev_reviewer_text;
  sample_detection.value.time = minNameObject.sample_detection_time;
  sample_detection.value.name = minNameObject.quality_inspector_text;
  image_processing.value.time = minNameObject.image_processing_time;
  image_processing.value.name = minNameObject.img_processor_text;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.flow {
  padding: 8px 0 0 0;
  font-size: 12px;

  .flow-class {
    padding: 12px 12px 12px 24px;
  }

  .step {
    flex-basis: 32.5%;
    justify-content: flex-start;
    position: relative;

    .item {
      flex: auto;
      justify-content: center;
    }

    .time {
      height: 20px;
    }

    .step-area {
      padding: 15px 0;
      height: 24px;
      position: relative;
    }

    .step-hidden {
      visibility: hidden;
    }

    .line {
      position: absolute;
      left: 0;
      right: 0;
      top: 9px;
      height: 6px;
      background: var(--flow-step-current-line-color);
      border-radius: 4px;
    }

    .active-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 9px;
      height: 6px;
      background-image: url("@/assets/images/step.png");
      background-position: 94px;
    }

    .step-icon {
      position: absolute;
      left: -2px;
      top: 18px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--flow-step-current-border-color);
      background-color: var(--flow-active-title-bg-color);
      width: 28px;
      height: 28px;
    }

    .step-icon_check {
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);
    }

    .step-icon_current {
      background-color: var(--flow-step-current-bg-color);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #3487ff;
    }

    .triangle1 {
      margin: -1px;
      width: 20px;
      height: 80px;
      background-color: #f5f5f5;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }

    .triangle2 {
      margin-right: -19px;
      width: 20px;
      height: 80px;
      background-color: #fff;
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }

    &:first-child {
      .triangle1 {
        width: 20px;
        height: 80px;
        background: white;
        clip-path: initial;
      }
    }

    &:last-child {
      .triangle2 {
        width: 20px;
        height: 80px;
        background: white;
        clip-path: initial;
      }
    }
  }

  .end-step {
    flex-basis: auto;
  }

  .step-end {
    position: absolute;
    right: -20px;
    bottom: 1px;
    width: 91px;
    display: flex;
    justify-content: flex-end;
  }

  .step-end_time {
    position: absolute;
    right: 0;
    text-align: right;
    width: 120px;
  }

  .activeClass {
    color: #333;
  }

  .activeIcon {
    color: #3487ff;
  }
}

.unfinished {
  background: var(--base-danger-bg);
  border-radius: 2px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e50113;
  line-height: 14px;
  padding: 2px 3px;
  margin-left: 6px;
}

.active-title {
  width: 76px;
  height: 27px;
  line-height: 27px;
  background: var(--flow-active-title-bg-color);
  font-size: 12px;
  font-weight: 400;
  color: #3487ff;
  text-align: center;
  border-radius: 4px;
  position: absolute;
  left: 17px;
  bottom: -6px;
  transform: translateX(-50%);
}

.active-title::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 2px solid var(--flow-active-title-bg-color);

  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
